<template>
    <view class="page" v-if="pageLoad">
        <z-paging ref="paging" v-model="list" :refresher-end-bounce-enabled="false" :auto-show-back-to-top="true" :default-page-size="100000" @query="queryList">
            <view class="bg-white mx-16 mb-16 pa-16 radius-8 text-14" v-for="(item, index) in list" :key="item.id">
                <view class="flex justify-between align-center">
                    <view>{{ item.sourceText }}</view>
                    <view>
                        <view class="p-6 py-2" @click="handleCollectTranslate(item.id, index)">
                            <uni-icons type="star" :size="28" :color="item.collectionFlag == 1 ? style.primary : '#999'"></uni-icons>
                        </view>
                    </view>
                </view>
                <view class="flex justify-between align-center pt-5 mt-8 translate-box">
                    <view> {{ item.targetText }} </view>
                    <view class="flex justify-end">
                        <view class="flex align-center">
                            <view class="pl-6 py-2" @click="playAudio(item.id, 1)">
                                <uni-icons type="sound" :size="28" :color="currentPlayType == 1 && currentPlayId == item.id ? style.primary : '#999'"></uni-icons>
                            </view>
                            <view class="pl-6 py-2" @click="copyText(item.targetText)">
                                <uni-icons fontFamily="CustomFont" :size="23" color="#999">{{ '&#xe8b0' }}</uni-icons>
                            </view>
                            <view class="pl-6 py-2" @click="fullScreen(item.targetText)">
                                <uni-icons fontFamily="CustomFont" :size="23" color="#999">{{ '&#xe622' }}</uni-icons>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <translate-full-screen v-if="!isEmpty(fullScreenData)" :data="fullScreenData" @close="translateFullScreenClose"></translate-full-screen>
        </z-paging>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { copyText, isEmpty, toast } from '@/assets/js/utils';
import { getCollectList, collectTranslate } from '@/api/translate';
import { usePlayAudio } from '@/hooks/usePlayAudio';
import style from '../../assets/css/variables.module.scss';

const pageLoad = ref(false);
onLoad(options => {
    pageLoad.value = true;
});

//列表相关
const paging: any = ref(null);
const list: any = ref([]);
const queryList = async (pageNo: number, pageize: number) => {
    let data: any = {};
    data.lastId = pageNo > 1 ? list.value[list.value.length - 1].id : null;
    let [result, err] = await getCollectList(data);
    if (err) {
        paging.value.complete(false);
    } else {
        paging.value.complete(result);
    }
};

//收藏翻译
const handleCollectTranslate = async (id: any, index: any) => {
    uni.showLoading({ mask: true, title: '请求中' });
    let [result, err] = await collectTranslate(id);
    uni.hideLoading();
    if (result) {
        list.value.splice(index, 1);
        uni.$emit('refreshTranslateHistoryList');
        toast(`取消成功`);
    }
};

//播放音频相关
const { currentPlayId, currentPlayType, playAudio } = usePlayAudio();

//翻译全屏
const fullScreenData = ref({});
const fullScreen = (data: any) => {
    fullScreenData.value = { targetText: data };
};
const translateFullScreenClose = () => {
    setTimeout(() => {
        fullScreenData.value = {};
    }, 500);
};
</script>

<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background: #f6f6f6;
    .list {
        margin: 32rpx;
        .list-item {
            background-color: #fff;
            border-radius: 32rpx;
            padding: 32rpx 32rpx;
            margin-bottom: 32rpx;
        }
    }
}
.translate-box {
    border-top: 1rpx dashed #ddd;
}
</style>
